<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .top{
            display: flex;
            height: 100px;
            justify-content: center;
            /* padding: 0 200px; */
        }
        .top .ul1{
            display: flex;
            flex-direction: row;
            margin-left: 50px;
            /* justify-content: space-evenly; */
        }
        .top img{
            /* margin-left: 200px; */
        }
        .li1{ 
            height: 100px;
            line-height: 100px;
            vertical-align: middle;
            text-align: center;
            width: 80px;
            color: #777;
            margin-left: 10px;
            position: relative;
        
        }
        .li1:hover{ 
            background-color: #174fa4;
            color: #fff;
        }
        .ul2{
            /* display: none; */
            position: absolute;
            top: 100px;
            left: 0;
            background-color: #174fa4;
            color: #fff;
            /* display: flex; */
            /* flex-direction: column; */
            /* border: red solid 1px; */
            /* display: none; */
            overflow: hidden;
            
        }
        .li2{
            width: 150px;
            height: 0px;
            line-height: 40px;
            transition: all .4s linear;
            text-align: left;
            margin-left: 30px;
            font-size: 14px;
        }
        .select{
            background-color: #174fa4;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="top">
        <img src="http://www.zzkjg.com/images/logo.jpg" alt="">
        <ul class="ul1"> </ul>
    </div>
    <script>
        let arr = [{title:'首页',list:[]},
        {title:'概况',list:['科技馆介绍','馆内资讯','通知公告','预算公开']},
        {title:'楼层展览',list:['展馆一层','展馆二层','展馆三层','临时展馆']},
        {title:'科普活动',list:['科普大篷车','科普报告会','校馆结合','魅力科学课堂','科普表演剧','理论广角','创客训练营','数学实验室']},
        {title:'影院影讯',list:['影院介绍','播放场次','影片介绍']},
        {title:'科普志愿者',list:['志愿者管理办法','志愿者风采','网上申请']},
        {title:'咨询服务',list:['开馆时间','失物招领','公交路线','参观须知','联系我们']},
        {title:'报名入口',list:['资源下载','科学运动会报名','科普大篷车报名']}]
        let ul1 = document.querySelector('.ul1');
        for (let i = 0; i < arr.length; i++) {
            let ulList = '';
            for (let j = 0; j <arr[i].list.length; j++) {
                ulList += `<li class ='li2'>${arr[i].list[j]}</li>`
            }
            ul1.innerHTML += `<li class='li1'>${arr[i].title}<ul class='ul2'>${ulList}</ul></li> `
        }
        
        let li1 = document.querySelectorAll('.li1');
        // console.log(li1);
        let li2 = document.querySelectorAll('.li2');
        let ul2 = document.querySelectorAll('.ul2');
        ul2[1].style.display ='block';
        for (let i = 0; i < li1.length; i++) {
            li1[i].addEventListener('mouseover',function(){
                for (let j = 0; j < li1.length; j++) {
                    li1[j].classList.remove('select');
                    
                }
                this.classList.add('select');
                let list = ul2[i].querySelectorAll('li')
                for (let j = 0; j < list.length; j++) {
                    list[j].style.height ='40px';
                    list[j].addEventListener('mouseover',function(){
                        this.style.translate = '3px';
                        this.style.backgroundColor='#315ea2'
                    })
                    list[j].addEventListener('mouseleave',function(){
                        this.style.translate = '-3px';
                        this.style.backgroundColor='#174fa4'
                    })
                }
            })
            li1[i].addEventListener('mouseleave',function(){
                // console.log(ul2[i]);
                let list = ul2[i].querySelectorAll('li')
                for (let j = 0; j < list.length; j++) {
                    list[j].style.height ='0px';
                }
            })
        }
        
    </script>
</body>
</html>